<template>
	<view class="">
		<!-- 搜索框 -->
		<view class="container">
			<uni-search-bar radius="10" placeholder="搜索一下，爱上这个世界" @confirm="search" />
		</view>

		<!-- 轮播 -->
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration" :indicator-color="indicator_color" :indicator-active-color="indicator_active_color"
				:previous-margin="previous_margin" :next-margin="next_margin">
				<swiper-item v-for="(rota ,index) in adsList" :key="rota.id" @tap="swiperTap(rota.id)">
					<view class="swiper-item">
						<image :src="rota.url" class="fengrui-img" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 金刚区 2020.06.18更新 -->
		<view class="grid-w container">
			<view v-for="(grid ,index) in grids" :key="index" @tap="tapGrids(index)">
				<view class="grid-img">
					<image class="fengrui-img" :src="grid.images"></image>
				</view>
				<view class="grid-t">{{ grid.name }}</view>
			</view>
		</view>

		<!-- 标题 -->
		<view class="title-h container">
			最新文章
		</view>

		<!-- 文章列表单排大图 -->
		<view v-if="HomeCateStatus == 1">
			<view class="" v-for="(pos ,index) in List" :key="index" @tap="posTap(pos.aid)">
				<view class="list-one-w">
					<view class="list-one-img">
						<image class="fengrui-img" :src="pos.url" mode="aspectFill"></image>
					</view>
					<view class="list-one-data-w">
						<view class="list-one-title">
							{{ pos.article_title}}
						</view>
						<view class="list-ona-abstract">
							{{pos.article_introduction}}
						</view>
						<view class="list-one-qu">
							<view class="list-one-time">
								<view class="list-one-time-y"></view>
								<view class="list-one-time-n">
									时间：{{pos.article_create_time}}
								</view>
							</view>
							<view class="list-one-time">
								<view class="list-one-time-l"></view>
								<view class="list-one-time-n">
									阅读：{{pos.article_read_num}}
								</view>
							</view>
							<view class="list-one-time">
								<view class="list-one-time-h"></view>
								<view class="list-one-time-n">
									评论：{{pos.article_comment_num}}
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<!-- 文章列表双排小图 -->
		<view class="list-two-w container" v-if="HomeCateStatus == 2">
			<view class="list-two-list" v-for="(pos ,index) in List" :key="index" @tap="posTap(pos.aid)">
				<view class="list-two-img">
					<image class="fengrui-img" :src="pos.url" mode="aspectFill"></image>
				</view>
				<view class="list-two-title">
					{{ pos.article_title}}
				</view>
				<view class="list-two-abstract">
					{{pos.article_introduction}}
				</view>
				<view class="list-two-qu">
					<view class="list-one-time">
						<view class="list-one-time-l"></view>
						<view class="list-one-time-n">
							阅读：{{pos.article_read_num}}
						</view>
					</view>
					<view class="list-one-time">
						<view class="list-one-time-h"></view>
						<view class="list-one-time-n">
							评论：{{pos.article_comment_num}}
						</view>
					</view>
				</view>
			</view>

		</view>

		<!-- 列表 左图右文 -->
		<view class="" v-if="HomeCateStatus == 3">
			<view class="" v-for="(pos ,index) in List" :key="index" @tap="posTap(pos.aid)">
				<view class="list-three-w">
					<view class="list-three-img">
						<image class="fengrui-img" :src="pos.url" mode="aspectFill"></image>
					</view>
					<view class="list-three-text list-three-pos">
						<view class="list-three-pos-top">
							<view class="list-one-title ">
								{{ pos.article_title}}
							</view>
							<view class="list-two-abstract">
								{{pos.article_introduction}}
							</view>
						</view>
						<view class="list-two-qu list-three-pos-bom">
							<view class="list-one-time">
								<view class="list-one-time-l"></view>
								<view class="list-one-time-n">
									阅读：{{pos.article_read_num}}
								</view>
							</view>
							<view class="list-one-time">
								<view class="list-one-time-h"></view>
								<view class="list-one-time-n">
									评论：{{pos.article_comment_num}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 微信视频广告 每个 4哥出现一次 -->
				<!-- #ifdef MP-WEIXIN -->
				<view class="lis-one-ad">
					<ad v-if="(index +1) % 4 == 0" :unit-id="WxAds[3].value" ad-type="video" ad-theme="white"></ad>
				</view>
				<!-- #endif -->
			</view>
		</view>

		<!-- 文章列表没有数据 -->
		<view class="no-list-data" v-if="no_list_data">
			--我的底线就到这里了--
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				// 金刚区
				grids: [{
						id: '1',
						images: '../../static/index/square.png',
						name: '广场'
					},
					{
						id: '2',
						images: '../../static/index/special.png',
						name: '专题'
					},
					{
						id: '3',
						images: '../../static/index/resources.png',
						name: '资源'
					},
				],
				// article_status: 1,
				// 轮播
				previous_margin: '30rpx',
				next_margin: '30rpx',
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				indicator_color: "rgba(217, 217, 217, 1)",
				indicator_active_color: "#4EDDB1",
				adsList: [],
				// 文章列表
				List: [],
				settingInfo: "",
				page: 1,
				pageSize: 10,
				pageAds: 1,
				pageSizeAds: 10,
				// 文章没有数据
				no_list_data: false,
				// 首页大图 小图分类
				HomeCateStatus: '',
				// 微信流量主广告
				// #ifdef  MP-WEIXIN
				WxAds: []
				//#endif
			}
		},
		onLoad() {
			this.firstExecution();
		},
		// 分享小程序界面
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: this.settingInfo[0].value,
				path: '/pages/index/index',
				imageUrl: ''
			}

		},
		// #ifdef  MP-WEIXIN
		onShareTimeline() {
			return {
				title: this.settingInfo[0].value,
				imageUrl: ''
			}
		},
		// #endif
		// 下拉刷新
		onPullDownRefresh() {
			console.log('用户下拉刷新');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		// 监听触底
		onReachBottom() {
			this.page = this.page + 1,
				this.getArticleList();
		},
		methods: {
			//首次执行
			firstExecution() {
				let that = this;
				uni.$on('access_token', function(data) {
					that.getdata()
				})
				if (app.globalData.access_token) {
					that.getdata()
				}
			},
			getdata: function() {
				this.getCacheSetting();
				this.getArticleList();
				this.getAdsList();
				this.getHomeCateStatus();
				// 条件编译 微信小程序 流量主广告
				// #ifdef  MP-WEIXIN
				// this.getWxAds();
				//#endif
			},
			// 金刚区挑转
			tapGrids: function(e) {
				// var that = this;
				switch (e) {
					case 0:
						uni.navigateTo({
							url: "../square/square"
						})
						break;
					case 1:
						uni.switchTab({
							url: "../category/category"
						})
						break;
					case 2:
						uni.switchTab({
							url: "../resources/resources"
						})
						break;
				}
				// console.log(e)
				// if (e == '0') {

				// } else if (e == '1') {

				// } else if (e == '2') {

				// } else {
				// 	uni.navigateTo({
				// 		url: "../friend/friend"
				// 	})
				// }
			},
			// 轮播挑转
			swiperTap: function(e) {
				var swiperId = e;
				uni.navigateTo({
					url: "../data/data"
				})
			},
			// 文章详情跳转
			posTap: function(e) {
				var posId = e;
				uni.navigateTo({
					url: "../data/data?aid=" + posId
				})
			},
			//站点缓存
			getCacheSetting: function() {
				var that = this;
				var settingInfo = uni.getStorageSync('settingInfo')
				if (settingInfo) {
					that.settingInfo = JSON.parse(settingInfo)
				} else {
					app.getSetting();
					uni.$once('updateSetting', function(data) {
						that.getCacheSetting();
					})
					return;
				}
				console.log(that.settingInfo)
				uni.setNavigationBarTitle({
					title: that.settingInfo[0].value
				})
			},
			//获取文章列表
			getArticleList: function() {
				var that = this;
				var settingInfo = '';
				var postData = {
					page: that.page,
					pageSize: that.pageSize
				}
				//传输信息
				app.request('/Article/getArticleList', postData, 'GET',
					function(res) {
						if (res.data.code == 1) {
							that.List = that.List.concat(res.data.data);
						}
						if (res.data.data.length == 0) {
							that.no_list_data = true;
						}
						console.log('成功');
						console.log(res);
					},
					function(res) {
						console.log('失败');
						console.log(res);
					},
					function(res) {
						console.log('完成');
						console.log(res);
					},

				);
			},
			//获取广告列表（轮播图）
			getAdsList: function() {
				var that = this;
				var settingInfo = '';
				var postData = {
					page: that.pageAds,
					pageSize: that.pageSizeAds
				}
				//传输信息
				app.request('/Ads/getAdsList', postData, 'GET',
					function(res) {
						if (res.data.code == 1) {
							that.adsList = res.data.data
						}
						if (res.data.data == 0) {
							that.no_list_data = true;
						}
						console.log('成功');
						console.log(res);
					},
					function(res) {
						console.log('失败');
						console.log(res);
					},
					function(res) {
						console.log('完成');
						console.log(res);
					}
				);
			},
			//搜索文章
			search: function(e) {
				var json = e.value;
				if (json == '') {
					// console.log('请输入内容')
					uni.showToast({
						title: '请输入内容',
						mask: true,
						icon: 'success',
						duration: 1500
					});
				} else {
					uni.navigateTo({
						url: "/pages/searchlist/searchlist?keyword=" + json
					})
				}
			},
			// 首页大图 小图 列表分类
			getHomeCateStatus: function() {
				var that = this;
				var settingInfo = '';
				var postData = {}
				//传输信息
				app.request('/Setting/getHomeCateStatus', postData, 'GET',
					function(res) {
						if (res.data.code == 1) {
							that.HomeCateStatus = res.data.data.status;
						}
					},
					function(res) {
						console.log('失败');
						console.log(res);
					},
					function(res) {
						console.log('完成');
						console.log(res);
					}
				);
			},
			// 条件编译 微信小程序 流量主广告
			// #ifdef  MP-WEIXIN
			getWxAds: function() {
				//从缓存获取广告 0是Banner广告 1是激励式广告 2插屏广告 3视频广告 4视频贴片广告 5格子广告
				var that = this;
				var adIds = uni.getStorageSync('AdsWxList');
				that.WxAds = adIds
				console.log(that.WxAds)
			}
			//#endif
		},

	}
</script>

<style>
	/* 外层组件的宽度可设置成100%或具体数值 */
	.adContainer {
		margin: 0rpx 30rpx;
	}

	.lis-one-ad {
		margin: 22px 22px 38px 22px;
		border-radius: 20rpx;
	}

	/* 左图右文 */
	.list-three-text {
		width: 400rpx;
	}

	.list-three-pos-bom {
		position: absolute;
		bottom: 0px;
		left: 0px;
		width: 100%;
	}

	.list-three-pos-top {
		position: absolute;
		top: 0px;
		left: 10rpx;
	}

	.list-three-pos {
		position: relative;
	}

	.list-three-img {
		background-color: #7A7E83;
		border-radius: 10rpx;
		height: 170rpx;
		width: 300rpx;
		margin-right: 26rpx;
		font-family: 0;
		overflow: hidden;
	}

	.list-three-w {
		display: flex;
		margin: 50rpx 30rpx;
	}

	/* 列表没有数据 */
	.no-list-data {
		text-align: center;
		margin: 30rpx 0px;
		color: #ADADAD;
	}

	/* 文章列表双排小图 */
	.list-two-qu {
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.list-two-abstract {
		color: #ADADAD;
		font-size: 24rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		margin-top: 10rpx;
	}

	.list-two-title {
		font-size: 30rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-top: 16rpx;
	}

	.list-two-img {
		width: 100%;
		height: 200rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.list-two-list {
		border-radius: 20rpx;
		overflow: hidden;
		flex-shrink: 0;
		width: 48%;
		margin-bottom: 60rpx;
	}

	.list-two-w {
		margin: 50rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}


	/* 文章列表单排 */
	.list-one-time-n {
		color: #D3D3D3;
		font-size: 22rpx;
		height: 16rpx;
		line-height: 16rpx;
		margin-left: 8rpx;
	}

	.list-one-time-h {
		height: 18rpx;
		width: 18rpx;
		border-radius: 50rpx;
		background-color: #FD6D6D;
	}

	.list-one-time-l {
		height: 18rpx;
		width: 18rpx;
		border-radius: 50rpx;
		background-color: #70DDF0;
	}

	.list-one-time-y {
		height: 18rpx;
		width: 18rpx;
		border-radius: 50rpx;
		background-color: #4FABFA;
	}

	.list-one-time {
		display: flex;
		margin-top: 26rpx;
		margin-left: 18rpx;

	}

	.list-one-qu {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.list-ona-abstract {
		color: #ADADAD;
		font-size: 24rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-top: 16rpx;
	}

	.list-one-title {
		font-size: 32rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.list-one-data-w {
		margin: 28rpx;
	}

	.list-one-img {
		height: 280rpx;
		overflow: hidden;
		border-radius: 20rpx;
	}

	.list-one-w {
		box-shadow: 0px 2px 20px rgba(0, 15, 69, 0.1);
		border-radius: 20rpx;
		margin: 22px 22px 38px 22px;
		overflow: hidden;
	}

	/* 标题 */
	.title-h {
		font-size: 32rpx;
		margin-top: 40rpx;
	}

	/* 轮播 */
	uni-swiper .uni-swiper-dot-active {
		background-color: #e41313;
		width: 20px !important;
		border-radius: 50px;
	}

	uni-swiper .uni-swiper-dot-active {
		background-color: #4FABFA !important;
	}

	.uni-swiper-dot {
		width: 26px;
		height: 5px;
		background: #D9D9D9;
		border-radius: 50px;
	}

	.uni-bg-red {
		background-color: red;
	}

	.uni-margin-wrap {
		width: 100%;
		margin: 20rpx 0;
	}

	.swiper {
		height: 400rpx;
	}

	.swiper-item {
		display: block;
		height: 340rpx;
		border-radius: 20rpx;
		overflow: hidden;
		margin: 0rpx 10rpx;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	/* 金刚区 */
	.grid-t {
		color: #ADADAD;
		font-size: 26rpx;
		text-align: center;
	}

	.grid-img {
		height: 80rpx;
		width: 80rpx;
		overflow: hidden;
	}

	.grid-w {
		margin: 32rpx 0rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 0rpx 30rpx;
	}

	.container {
		padding: 0rpx 40rpx;
	}

	.fengrui-img {
		height: 100%;
		width: 100%;
	}
</style>
